<main class="app-content" id="modulesDiv">
    <div class="app-title">
        <div>
            <h1>
                <i class="fa fa-th-list "></i>
                图片管理
            </h1>
            <p>在此页面进行图片管理</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item">
                <i class="fa fa-home fa-lg"></i>
            </li>
            <li class="breadcrumb-item">
                <a href="#">图片管理</a>
            </li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="clearfix">
                        <div class="float-left" style="margin: 13px;" v-for="image in pageInfo.list">
                            <div class="card" style="width: 18rem; height: 450px;">
                                <a @click="deleteModule(image.imageId)">
                                    <i class="fa fa-minus-square-o fa-2x"></i>
                                </a>
                                <div class="card-body">
                                    <img v-bind:src="image.image" class="card-img-top"
                                         style="max-width: 18rem;max-height: 350px">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div>
                    <span v-if=" pageInfo.navigatepageNums!=0">总{{pageInfo.total}}条数据</span>
                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"
                         v-if="pageInfo.navigatepageNums!=0" style="float: right">
                        <div class="btn-group mr-2" role="group" aria-label="First group">
                            <button type="button" class="btn btn-secondary"
                                    v-for=" (value,index) in pageInfo.navigatepageNums"
                                    :class="[value==pageInfo.pageNum?'active':'']"
                                    :value="value"
                                    @click="searchImages(value)">
                                {{value}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    var modulesVue = new Vue({
        el: "#modulesDiv",
        data: {
            pageInfo: {
                list: [],
                total: "",
                navigatepageNums: 0,
                pageNum: "",
            },
            searchBean: {
                keyword: "",
                currentPage: 0,
            },
            images: []
        },
        methods: {
            searchImages: function (index) {
                var self = this;
                self.searchBean.currentPage = index;
                self.images = []
                $.ajax({
                    url: "/api/images",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.pageInfo = rs;
                    }
                })
            },
            deleteModule: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/image/" + id,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        self.searchImages(0);
                                    } else {
                                        window.location.href = rs.data;
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            });
                        }
                    }
                })
            },
        },
        created: function () {
            window.searchImages = this.searchImages;
            window.deleteModule = this.deleteModule;
        },
        mounted: function () {
            this.searchImages(0)
        }
    })
</script>
